<script>
import '../flow-style.css';
import FlowSupport from '../FlowSupport.js';
import FlowAndG6 from '../typs/flowAndG6.js';
import {createModelProps, createProps, isEmpty} from '@/utils';
import {createService} from '@/request/service';

export default {
  name: "HFlowEditor",
  model: createModelProps(),
  props: {
    history: createProps(Boolean),
    processInstanceId: createProps(String),
    request: createProps(Object, () => ({
      baseURL: '/',
      headers: {},
    }))
  },
  render() {
    let h = this.$createElement;
    if (!this.rendered) {
      this.$nextTick(() => {
        FlowAndG6.createFlowModel(this);
      });
      this.rendered = true;
    }
    return this.createContainer(h);
  },
  data() {
    return {
      ...FlowAndG6.data(),
      value: undefined,
      flowPathRecord: {
        historyNodeList: [],
        currentNodeList: [],
        flowNodeStop: undefined,
      }
    };
  },
  mounted() {
    FlowSupport.register();
  },
  methods: {
    createContainer(h) {
      return h('div', {style: {width: '100%', height: "100%"}}, [h('div', {
        ref: 'flowContainer',
        class: ['h-flow-container'],
      }), this.createMiniMapContainer(h), this.createToolBarContainer(h)]);
    },
    createMiniMapContainer(h) {
      return h('div', {
        ref: 'flowMiniMap',
        class: ['h-flow-mini-map-container', {'h-flow-mini-map-container-hidden': !this.showMiniMap}]
      }, [h('div', {
        class: 'h-flow-mini-map-button',
        on: {click: () => this.showMiniMap = !this.showMiniMap}
      }, [h('a', [this.showMiniMap ? '收起' : '展开'])])]);
    },
    change(value) {
      this.value = value;
    },
    loadData() {
      let processInstanceId = this.processInstanceId;
      if (isEmpty(processInstanceId)) return ;
      let service = createService(this.request)
      service.get('/flow/getFlowModeByProcessInstanceId', {params: {processInstanceId}}).then(data => {
        this.value = JSON.stringify(data);
      });
      service.get('/flow/getProcessInstancePath', {params: {processInstanceId}}).then(data => {
        this.flowPathRecord.historyNodeList = data.historyNodeList
        this.flowPathRecord.currentNodeList = data.currentNodeList
        this.flowPathRecord.flowNodeStop = data.flowNodeStop
      });
    },
    createToolBarContainer(h) {
      return h('div', {
        class: 'h-flow-toolbar-container', ref: 'toolBarContainer', style: {
          right: this.showMiniMap ? '265px' : '9px',
          top: this.showMiniMap ? '10px' : '55px',
        }
      });
    },
  },
  watch: {
    value() {
      this.$nextTick(FlowAndG6.reRenderFlowModel(this));
    },
    'flowPathRecord.historyNodeList'() {
      this.$nextTick(FlowAndG6.reRenderFlowModel(this));
    },
    'flowPathRecord.currentNodeList'() {
      this.$nextTick(FlowAndG6.reRenderFlowModel(this));
    },
    'flowPathRecord.flowNodeStop'() {
      this.$nextTick(FlowAndG6.reRenderFlowModel(this));
    },
    processInstanceId: {
      handler() {
        this.loadData();
      },
      immediate: true
    },
  }
}
;
</script>
